App builderWeb

Build an E-commerce App

Build a browser storefront and verify product data, navigation, and the external checkout journey.

2 min readBuild at your own paceOpen Apps

Start with a small storefront: a product list, a product detail screen, and a clear way to continue to checkout. This guide focuses on a working browser journey, not a complete inventory and fulfillment system.

1. Start from a project template

1. 1Open Apps and create a project.
2. 2Choose E-Commerce under Choose a template.
3. 3Name the project and create it.
4. 4Open Pages and review the screens and actions that loaded.

Inspect the template before replacing content. Prepared screens do not establish that your payment account, product data, or order processing is configured.

2. Prepare sample products

For built-in storage, open Backend → AppStruct, create a database if needed, and add a products table. Useful starting columns are name as Text, description as Text, price as Number, and image as Image.

Add a few sample products. Keep pricing and currency display deliberate; a plain Number field does not decide the currency or tax treatment of a transaction.

3. Shape the storefront

Use Product Card or a list of components to present products. Add a detail screen if the template does not already contain the one you need. The screen-template menu includes Product Page, Product Detail, Checkout, and Shopping Cart layouts.

Replace sample copy and images. Configure the product read action and map returned fields into the intended card or list template. Connect product controls to the correct destination screen.

Test a product without an image, a long product name, and an empty catalog. Keep the main action visible at narrow browser widths.

4. Configure the checkout boundary

The workflow's Integrations → Stripe option creates a payment-link integration with a Stripe payment link field. Configure the intended link and test its external checkout flow using the payment provider's appropriate test setup.

Opening a payment link is not the same as recording a confirmed order or granting paid access. Plan and verify payment confirmation, order records, inventory changes, fulfillment, and duplicate handling separately before accepting real purchases.

Do not display “Order complete” solely because someone clicked a checkout button or returned to a screen.

5. Review and publish

Run Preview through catalog, detail, and checkout. Check that navigation returns somewhere useful and that the displayed product matches the intended purchase.

Choose Publishing → Web App → Publish, wait for a successful deployment, and repeat the checks at the published URL. Verify product data and the external result, not only the appearance of the screens.